<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ article_obj.name }}</title>
    <link rel="stylesheet" href="{% static 'plugin/font-awesome-4.7.0/css/font-awesome.min.css' %}">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="{% static 'ico/kaidan_article.ico' %}"/>
    <style>
        .article_content {
            margin-top: 5px;
            margin-left: 180px;
            margin-right: 100px;
            font-size: 40px;
        }

        .error_msg {
            position: relative;
            margin-left: 35px;
            color: red;
        }
    </style>
</head>
<body>
<div class="article_content">
    <div style="margin-left: 180px">
        <span> 标题：</span>
        {{ article_obj.name }}
    </div>
    <hr>
    <div>
        <span style="margin-left: 180px">作者：</span>
        {{ article_obj.userinfo.username }}
    </div>
    <hr>
    <div>
        {{ article_obj.content }}
    </div>
    <div>

        <!-- 渲染评论点赞 -->
        <div class="container-fluid">
            <div class="row">
                <div class="row">
                    <div class="col-xs-6 col-md-4">

                        <div style="float: right">
                            <input type="button" class="btn btn-large" name="Step_down" id="id_Step_down" value="点踩">
                            <i class="fa fa-thumbs-o-up" aria-hidden="true"
                               id="id_i4">{{ article_obj.Step_down }}</i>
                            <span class="error_msg"></span>
                        </div>
                        <div style="float: right">
                            <input type="button" class="btn btn-large" name="Step_up" id="id_Step_up" value="点赞">
                            <i class="fa fa-thumbs-o-up" aria-hidden="true"
                               id="id_i3">{{ article_obj.Step_up }}</i>
                            <span class="error_msg"></span>
                        </div>

                    </div>
                    <div class="col-xs-12 col-md-8">
                        <!--评论渲染-->
                        <div>
                            <ul class="list-group">
                                {% for item in comment_obj %}
                                    <li class="list-group-item">
                                        <span># {{ forloop.counter }}楼</span>
                                        <span class="fa fa-hourglass-half"
                                              aria-hidden="true"> {{ item.create_datetime }}</span>
                                        <span class="fa fa-user-circle"
                                              aria-hidden="true"> {{ item.userinfo.username }}</span>
                                        <span><a class="pull-right reply"
                                                 username="{{ item.kaidan_restaurant.userinfo.username }}"
                                                 comment_id="{{ item.id }}">
                                            回复
                                        </a></span>
                                        <div>
                                            {% if item.parent_id %}
                                                <p>@ {{ item.parent.kaidan_restaurant.userinfo.username }}</p>
                                                {{ item.comment }}
                                            {% else %}
                                                <span>{{ item.comment }}</span>
                                            {% endif %}
                                        </div>

                                        <a href="{% url 'kaidan_comment_up' comment_id=item.id %}">
                                            <span class="fa fa-hand-o-up comment_up"
                                              aria-hidden="true">点赞 {{ item.Step_up }}</span>
                                        </a>
                                        <a href="{% url 'kaidan_comment_down' comment_id=item.id  %}">
                                            <span class="fa fa-hand-o-down comment_down"
                                              aria-hidden="true">点踩 {{ item.Step_down }}</span>
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                        <!--渲染结束-->

                        <!--评论框开始-->
                        <div>
                            {% csrf_token %}
                            <p>
                                <sapn class="fa fa-commenting-o" aria-hidden="true">&nbsp;评论</sapn>
                            </p>
                            <div>
                                <textarea name="comment" id="id_comment" cols="35" rows="5"
                                          placeholder="请输入内容,请文明用语"></textarea>
                            </div>
                            <span class="error_msg" id="msg"></span>
                            <input type="button" value="提交" id="commentBtn">
                        </div>
                        <!--评论框结束-->

                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
    $(function () {
        stepUp();
        stepDown();
        comment();
    })
    // 文章点赞数量
    let numUP = Number({{ article_obj.Step_up }});
    // 文章点踩数量
    let numDown = Number({{ article_obj.Step_down }});
    // 父ID
    let parent = null
    // 时间对象
    let time = new Date();

    // 点赞
    function stepUp() {
        $("#id_Step_up").click(function () {

            $.ajax({
                url: "{% url 'Step_up' pk=article_obj.pk %}",
                type: "GET",
                dataType: "JSON",
                data: {'Step_up': 'Step_up'},
                success: function (ret) {
                    if (ret.status === 1) {
                        $("#id_i3").text(numUP + 1)
                    } else if (ret.status === 2) {
                        // 点过踩 在点赞
                        // 自身加一，对方减一
                        $("#id_i3").text(numUP + 1)
                        $("#id_i4").text(numDown - 1)
                    } else {
                        // 渲染错误信息
                        $("#id_Step_up").next().next().text(ret.msg)
                    }
                }
            })
        })
    }

    // 点踩
    function stepDown() {
        $("#id_Step_down").click(function () {
            $.ajax({
                url: "{% url 'Step_down' pk=article_obj.pk %}",
                type: "GET",
                dataType: "JSON",
                data: {'Step_down': 'Step_down'},
                success: function (ret) {
                    if (ret.status === 1) {
                        $("#id_i4").text(numDown + 1)
                    } else if (ret.status === 2) {
                        // 点过赞 在点踩
                        // 自身加一，对方减一
                        $("#id_i3").text(numUP - 1)
                        $("#id_i4").text(numDown + 1)
                    } else {
                        // 渲染错误信息
                        $("#id_Step_down").next().next().text(ret.msg)
                    }
                }
            })
        })
    }

    // 评论提交
    function comment() {
        $("#commentBtn").click(function () {
            $("#msg").empty();
            let username = '{{ request.chart_web.user.username }}'
            let time_now = time.toLocaleString();
            let comment = $("#id_comment").val();
            // 如果有parent 进行切片，将内容多余的删除
            if (parent) {
                // 顾头不顾尾 所以要加一
                let indexNum = comment.indexOf('\n') + 1;
                // 前端切片只会保留索引后面的内容
                comment = comment.slice(indexNum)
            }
            $.ajax({
                url: "{% url 'kaidan_comment' pk=article_obj.id %}",
                type: "POST",
                data: {
                    'comment': comment,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'parent': parent
                },
                dataType: "JSON",
                success: function (ret) {
                    if (ret.status) {
                        // 清空评论框
                        $("#id_comment").val('')
                        // 临时渲染
                        let temp = `
                                <li class="list-group-item">
                                    <span class="fa fa-user-circle"
                                          aria-hidden="true"> ${username}</span>
                                    <span class="fa fa-hourglass-half"
                                          aria-hidden="true"> ${time_now}</span>
                                    <div><span>${comment}</span></div>

                                </li>
                                `
                        $('.list-group').append(temp)
                        parent = null

                    } else {
                        $("#msg").text(ret.msg.comment);
                    }
                }
            })
        });
    }

    // 点击回复，跳到回复框按钮 @+username+\n
    $(".reply").click(function () {
        // 获取当前根评论名字
        let PUsername = $(this).attr('username');
        // 获取父id
        parent = $(this).attr('comment_id');

        // 聚焦
        $("#id_comment").val('@' + PUsername + '\n').focus();
    })


</script>
</body>
</html>